<template>
  <div>
    <h1>动态详情</h1>
    <h2>{{ dynamic.title }}</h2>
    <p>发布时间：{{ dynamic.publishDate }}</p>
    <p>动态详情：{{ dynamic.details }}</p>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import Mock from 'mockjs';

export default {
  setup() {
    const route = useRoute();
    const dynamic = ref({});

    onMounted(() => {
      const id = route.params.id;
      fetchDynamic(id);
    });

    const fetchDynamic = (id) => {
      const data = Mock.mock({
        'dynamic': {
          'id|+1': id,
          title: '@title(5, 10)',
          publishDate: '@date("yyyy-MM-dd")',
          details: '@paragraph(1)'
        }
      });
      dynamic.value = data.dynamic;
    };

    return {
      dynamic
    };
  }
};
</script>

<style scoped>
/* 添加一些样式以匹配设计图 */
</style>